<template>
  <div class="member-list">
    <!--    订单管理-退款审核-->
    <BasicTable @register="registerTable">
      <template #status="{ text }">
        <Tag :color="targetStatus(text, statusList).color">
          {{ targetStatus(text, statusList).label }}
        </Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '审核',
              ifShow: record['status'] === UNAUDITED,
              onClick: handleAudit.bind(null, record['approvalApplyId']),
            },
          ]"
        />
      </template>
    </BasicTable>

    <RefundAuditModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import { Tag } from 'ant-design-vue';
  import { targetStatus } from '@/utils';
  import mcApi from 'mc-c2b2m-operator-api';
  import RefundAuditModal from './modal.vue';
  import { useModal } from '@/components/Modal';
  import { tableColumns, tableFormSchema } from './data';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
  import {
    ApprovalApplyStatusEnum,
    approvalApplyStatusList as statusList,
  } from '@/enums/orderEnum';

  const { OrderModule } = mcApi;
  const { RefundAuditApi } = OrderModule;

  const { APPROVED, UNAUDITED } = ApprovalApplyStatusEnum;

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    beforeFetch: (args) => {
      args.desc = 'caa.created_time';
    },
    api: RefundAuditApi.getOrderRefundApprovalApplyPage,
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    actionColumn: {
      width: 200,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal, closeModal }] = useModal();

  function handleAudit(approvalApplyId: string) {
    openModal(true, { approvalApplyId, status: APPROVED });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
